<template>
  <view class="player-path-box">
    <scroll-view scroll-y="true">
      <view class="list-box" v-if="dataList.length>0">
        <view class="item" v-for="item in dataList" :key="item" @click="jumpDetail(item)">
          <view class="item-left">
            <img class="item-img" :src="img_baseUrl+item.imgPath" alt="" />
          </view>
          <view class="item-right">
            <view class="title">{{item.title}}</view>
            <view class="tag-box" v-if="false">
              <view class="tag"> 星官推荐路线 </view>
              <view class="tag"> 星官推荐路线 </view>
            </view>
            <view class="info-box" v-if="false">
              <text>2个景点 约1.5小时 5.1公里</text>
            </view>
          </view>
        </view>
      </view>
      <view class="noData" v-else style="height: 100%;">
        <image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
        <text>暂无数据</text>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import {requestGet} from "@/utils/request";

export default {
  data() {
    return {
      img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      dataList: [],
      total: 0,
      pages:{
        pageNum: 1,
        pageSize: 10
      },
      loadMore: true
    };
  },
  onShow() {
    this.loadMore = true;
    this.pages = {
      pageNum: 1,
      pageSize: 10
    };
    this.dataList = [];
    this.getList()
  },
  methods: {
    getList() {
      if(!this.loadMore){
        return
      }
      requestGet('/baseplatform/home/content/list',{...this.pages,channelId:'4'}).then(res => {
        if(res.code === 200){
          if(res.rows.length > 0){
            this.dataList.push(...res.rows);
            if(this.dataList.length < res.total){
              this.loadMore = true;
              this.pages.pageNum = this.pages.pageNum + 1;
            }else{
              this.loadMore = false;
            }
          }
        }
      }).catch((err) => console.log('错误了', err))
    },
    jumpDetail(item) {
		if (item.linkUrl) {
			uni.navigateTo({
			  url: item.linkUrl,
			});
			return
		} 
      uni.navigateTo({
        url: `/page_index/news/detail?id=${item.id}`
      })
    },
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this._getList();
  },
};
</script>

<style lang="scss">
.player-path-box {
  background: #f5f5f5;
  height: 100vh;

  .list-box {
    padding: 0 32rpx;
    box-sizing: border-box;
  }

  .item {
    display: flex;
    align-items: self-start;
    background: #ffffff;
    margin-top: 16rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
	box-sizing: border-box;
	padding: 16rpx;
  }

  .item-left {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
	overflow: hidden;
  }

  .item-img {
    width: 100%;
    height: 100%;
	display: block;
  }

  .item-right {
    // padding: 32rpx 24rpx;
     flex: 1;
	 margin-left: 24rpx;
    .title {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #000000;
      line-height: 44rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tag-box {
      margin-top: 16rpx;
      display: flex;
      align-items: center;
    }

    .tag {
      padding: 4rpx 8rpx;
      background: #d6ebff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #2187ff;
      line-height: 34rpx;
      margin-right: 8rpx;
    }

    .info-box {
      margin-top: 54rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 30rpx;
    }
  }
}
</style>
